import React, {useEffect, useState} from "react";
import './parking_manege.scss'
import {Button, Input, Select, Table} from "antd";
import {Option} from "antd/es/mentions";
import {getManagerParkLotInfoByConditions} from "../../api/parkLotApi";


function ParkingManage(){

    const [data, setData] = useState()

    const getData = () => {
        getManagerParkLotInfoByConditions(14)
            .then(res => {
                setData(res)
            })
    }

    useEffect(() => {
        getData()
    }, []);


    const columns = [
        {
            title: '备案管理状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '停车场名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '流水号',
            dataIndex: 'sno',
            key: 'sno',
        },
        {
            title: '备案号',
            dataIndex: 'recordNo',
            key: 'recordNo',
        },
        {
            title: '停车场类型',
            dataIndex: 'parkLotType',
            key: 'parkLotType',
        },
        {
            title: '停车场等级',
            dataIndex: 'parkLevel',
            key: 'parkLevel',
        },
        {
            title: '停车场地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '所属区域',
            dataIndex: 'districtName',
            key: 'districtName',
        },
        {
            title: '车位数',
            dataIndex: 'planParkCount',
            key: 'planParkCount',
        },
        {
            title: '产权单位',
            dataIndex: 'propertyOrgName',
            key: 'propertyOrgName',
        },
        {
            title: '管理单位',
            dataIndex: 'manageOrgName',
            key: 'manageOrgName',
        }
    ];


    return(
        <div className={'parking-manage-container'}>
            <div className={'parking-manage-title'}>
                停车场管理
            </div>

            <div className={'parking-manage-select'}>
                <div className={'parking-manage-select-item'}>
                    <div style={{width:100,margin:"auto",textAlign:"center"}}>备案管理状态</div>
                    <Select defaultValue={'状态一'} style={{width:120}}>
                        <Option value={'状态一'}>状态一</Option>
                        <Option value={'状态二'}>状态二</Option>
                        <Option value={'状态三'}>状态三</Option>
                    </Select>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width:100,margin:"auto",textAlign:"center"}}>停车场类型</div>
                    <Select defaultValue={'类型一'} style={{width:120}}>
                        <Option value={'类型一'}>类型一</Option>
                        <Option value={'类型二'}>类型二</Option>
                        <Option value={'类型三'}>类型三</Option>
                    </Select>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width:100,margin:"auto",textAlign:"center"}}>停车场等级</div>
                    <Select defaultValue={'等级一'} style={{width:120}}>
                        <Option value={'等级一'}>等级一</Option>
                        <Option value={'等级二'}>等级二</Option>
                        <Option value={'等级三'}>等级三</Option>
                    </Select>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width:100,margin:"auto",textAlign:"center"}}>重要商圈</div>
                    <Select defaultValue={'商圈一'} style={{width:120}}>
                        <Option value={'商圈一'}>商圈一</Option>
                        <Option value={'商圈二'}>商圈二</Option>
                        <Option value={'商圈三'}>商圈三</Option>
                    </Select>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width:100,margin:"auto",textAlign:"center"}}>停车场名称</div>
                    <Input defaultValue={''} style={{width: 120}}/>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width:100,margin:"auto",textAlign:"center"}}>停车场地址</div>
                    <Input defaultValue={''} style={{width: 120}}/>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width:100,margin:"auto",textAlign:"center"}}>管理单位</div>
                    <Input defaultValue={''} style={{width: 120}}/>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width:100,margin:"auto",textAlign:"center"}}>产权单位</div>
                    <Input defaultValue={''} style={{width: 120}}/>
                </div>

            </div>

            <div className={'parking-manage-panel'}>
                <Button type={'primary'}>查询</Button>
                <Button>重置</Button>
                <Button>导出查询结果</Button>
            </div>

            <div className={'parking-manage-table'}>
                <Table dataSource={data} columns={columns}/>
            </div>
        </div>
    )
}


export default ParkingManage